<template>
  <div class="sync">
    <div class="sync-content">
      <div class="img-box">
        <img :src="data.url" class="img-center">
      </div>
      <div class="sync-pop">
        <div class="name">{{ data.name }}</div>
        <div class="age">&nbsp;{{ data.age }}</div>
      </div>
    </div>

    <hr>

    <div>{{ data.desc }}</div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { axios } from "../../server/axios.ts"

  interface Data {
    data: {
      "name": string,
      "age": number,
      "url": string,
      "desc": string
    }
  }

  const { data } = await axios.get<Data>("http://localhost:5173/syncData.json", (res:object) => {
    console.log("请求成功", res)
  })
</script>

<style lang="less">
.sync-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .img-box {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid #1619b6;
  }
  .sync-pop {
    flex: 1;
  }
}
.img-center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.name {
  font-size: 18px;
  font-weight: bold;
}
.age {
  font-size: 16px;
}
.desc {
  font-size: 14px;
  color: #666;
}
</style>